<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="message"></h1>
    <input type="text" id="inputMsg">
    <script>
        //数据响应式
        var message="默认值";//定义依赖数据
        var obj={};//定义一个用于完成数据劫持的承载对象
        var dom1=document.getElementById("message");
        var dom2=document.getElementById("inputMsg");
        Object.defineProperty(obj,"msg",{
            get(){
                return message;
            },
            set(val){

               message=val;//完成新数据记录
               //完成了DOM对象和obj.msg有关的更新操作
               dom1.innerHTML=val;
               dom2.value=val;
            }
        });
        console.log(obj);
        //在页面加载完成后，完成默认的数据展示
        dom1.innerHTML=obj.msg;
        dom2.value=obj.msg;
        //绑定输入框的输入操作, 当input的value值发生变化时就会触发
        dom2.oninput=function(){
            obj.msg=this.value;//对象属性的赋值操作
        };

    </script>
</body>
</html>